<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base"
      th:with="pageTitle='部门管理'">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<head>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <style type="text/css">
        .btn {
            display: block;
            position: relative;
            background: #aaa;
            padding: 5px;
            float: left;
            color: #fff;
            text-decoration: none;
            cursor: pointer;
        }
        .btn.blue {
            background: #2ae;
        }

        #test {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<th:block layout:fragment="custom_content" >
    <h2>部门管理</h2>

    <el-dialog
            title="添加"
            :visible.sync="addDialogVisible"
            size="tiny"
            :before-close="handleAddClose" id="addDialog">
        <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" id="addForm">
            <el-form-item label="部门名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <!--<el-form-item label="部门链接" prop="url">-->
            <!--<el-input v-model="addForm.url"></el-input>-->
            <!--&lt;!&ndash;<el-input  v-model="addForm.url" onkeyup="lcase(this.value,this),this.value=this.value.toUpperCase(),checkinput_zzjs(this)"></el-input>&ndash;&gt;-->
            <!--</el-form-item>-->
            <el-form-item label="父部门" prop="parentId">
                <el-cascader
                        v-model="addForm.parentId"
                        :options="allMenus"
                        :props="props"
                        change-on-select
                ></el-cascader>
            </el-form-item>
            <el-form-item label="排序" prop="sorder">
                <el-input-number v-model:number="addForm.sorder" :max="9999"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleAddClose">取 消</el-button>
            <el-button type="primary" @click="handleAddSave('addForm')">保存</el-button>
        </div>
    </el-dialog>

    <el-dialog
            title="编辑"
            :visible.sync="editDialogVisible"
            size="tiny"
            id="editDialog">
        <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px" id="editForm">
            <el-form-item label="部门名称" prop="name">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="父部门" prop="parentId">
                <el-cascader
                        v-model="editForm.parentId"
                        :options="allMenus"
                        :props="props"
                        change-on-select
                ></el-cascader>
            </el-form-item>
            <el-form-item label="排序" prop="sorder">
                <el-input-number v-model:number="editForm.sorder" :max="9999"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleEditClose">取 消</el-button>
            <el-button type="primary" @click="handleEditSave('editForm')">保存</el-button>
        </div>
    </el-dialog>

    <el-dialog
            title="删除提示"
            :visible.sync="delDialogVisible"
            size="tiny">
        <span>确定删除该部门？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleDelConfirm">确 定</el-button>
        </span>
    </el-dialog>


    <el-button size="mini" type="primary" @click="handleAdd" style="margin-bottom: 20px;">添加部门</el-button>

    <el-table :data="tableData" v-loading.body="loading" stripe style="width:650px" id="test">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="name" label="部门名称" width="200"></el-table-column>
        <!--<el-table-column prop="url" label="部门链接" width="280"></el-table-column>-->
        <el-table-column prop="parentId" label="父ID" width="80"></el-table-column>
        <el-table-column prop="sorder" label="排序" width="80"></el-table-column>
        <el-table-column label="操作" width="220">
            <template scope="scope">
                <el-button size="mini" type="info" @click="handleEdit(scope.row.id)" v-if="scope.row.canDel">编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleDel(scope.row.id)" v-if="scope.row.canDel">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="sizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-sizes="pageSizesList"
            :page-size="pageSize"
            layout="total,sizes, prev, pager, next"
            :total="total">
    </el-pagination>

</th:block>
<th:block layout:fragment="javascript">
    <script>
        var listVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    siderWidthDialog:false,
                    siderbarWidth:15,
                    tableData: [],
                    pageNum: 0,
                    total: 0,
                    loading: false,
                    addDialogVisible: false,
                    breadcrumbs:['系统管理','部门管理'],

                    pageSize: 10,
                    pageSizesList: [2, 10, 20, 30, 50],
                    props:{
                        value:'id',
                        label:'label',
                        children:'children',
                        disabled:'disabled'
                    },
                    allMenus:[],
                    addForm: {
                        id: '',
                        name: '',
                        url: '',
                        parentId: [],
                        sorder: 1,
                        fullUrl:''
                    },
                    addRules: {
                        name: [
                            {required: true, message: '请输入部门名称', trigger: ['blur', 'change']}
                        ],
                        url: [
                            {required: true, message: '请输入部门链接', trigger: ['blur', 'change']}
                        ],
                        sorder: [
                            {required: true, message: '请输入部门排序', trigger: ['blur', 'change']}
                        ]
                    },
                    delId: '',
                    delDialogVisible: false,
                    editDialogVisible: false,
                    editForm: {
                        id: '',
                        name: '',
                        url: '',
                        parentId:[],
                        sorder: 1,
                        fullUrlArr:[]
                    },
                    selectedOptions:[],
                    editRules: {
                        name: [
                            {required: true, message: '请输入部门名称', trigger: ['blur', 'change']}
                        ],
                        url: [
                            {required: true, message: '请输入部门链接', trigger: ['blur', 'change']}
                        ],
                        sorder: [
                            {required: true, message: '请输入部门排序', trigger: ['blur', 'change']}
                        ]
                    },
                    isCollapse: false,
                    defaultIndex: '2-1',
                    menus: [],
                    deptmenus: [],
                    regulationMenus: [],
                    deptTrees:[]
                }
            },
            methods: {
                handleItemChange: function (val) {
                },
                handleCurrentChange: function (val, size) {
                    search();
                    var $this = this;
                    $this.$nextTick(function(){
                        changeFooterHeight();
                    })
                },
                sizeChange: function (val) {
                    listVue.pageSize = val;
                    search();
                    var $this = this;
                    $this.$nextTick(function(){
                        changeFooterHeight();
                    })
                }, handleAddClose: function () {
                    this.$refs["addForm"].resetFields();

                    listVue.addForm = {name: '', url: '', parentId:[], sorder: 1};
                    listVue.addDialogVisible = false;
                }, handleEditClose: function () {
                    this.$refs["editForm"].resetFields();

                    listVue.editForm = {name: '', url: '', parentId:[], sorder: 1};
                    listVue.editDialogVisible = false;
                }, handleAdd: function () {
                    listVue.addForm = {name: '', url: '', parentId: [], sorder: 1};
                    var data = {};
                    $.ajax({
                        cache: true,
                        url: '/dept/all?newDate=' + Math.random(),
                        type: 'GET',
                        data: data,
                        dataType: 'json',
                        contentType: 'application/json',
                        async: true,
                        success: function (data) {

                            if (data.status == 1) {
                                if (data.value.menus) {
                                    listVue.deptmenus = data.value.menus;
                                }

                                var allMenu = [{
                                    id: 0,
                                    name: '部门列表',
                                    label: '部门列表',
                                    disabled: false,
                                    children:  listVue.deptmenus,
                                }];
                                listVue.allMenus = allMenu;

                                if ($('.siderbar [tabindex="-1"].is-active').offset()) {
                                    $('.siderbar').animate({
                                        scrollTop: $('.siderbar [tabindex="-1"].is-active').offset().top
                                    }, 1);

                                }
                            }
                            // return data;
                        }
                    });
                    listVue.addDialogVisible = true;
                }, handleAddSave: function (formName) {
                    var $this = this;
                    this.$refs[formName].validate(function (valid) {
                        if (valid) {


                            if (listVue.addForm.parentId == '') {
                                $this.$alert('请选择父部门！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {

                                    }
                                });

                                return;
                            } else {
                                var parentId = listVue.addForm.parentId;
                                listVue.addForm.fullUrl = parentId.toString();
                                listVue.addForm.parentId = listVue.addForm.parentId[parentId.length-1];

                            }

                            $.ajax({
                                cache: true,
                                url: '/dept/add',
                                type: 'POST',
                                data: JSON.stringify(listVue.addForm),
                                dataType: 'json',
                                contentType: 'application/json',
                                async: false,
                                success: function (data) {
                                    if (data.status == 1) {
                                        $this.$refs["addForm"].resetFields();
                                        $this.$message('保存成功');
                                        listVue.addDialogVisible = false;
                                        listVue.addForm = {name: '', url: '', parentId: [], sorder: 1};
                                        listVue.initMenu();
                                        search(listVue.pageNum);
                                        listVue.addHeight();
                                    } else {
                                        $this.$message.error(data.msg);
                                    }
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                }, handleEditSave: function (formName) {
                    var $this = this;


                    this.$refs[formName].validate(function (valid) {
                        if (valid) {
                            if (!listVue.editForm.parentId) {
                                $this.$alert('请选择父部门！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {

                                    }
                                });

                                return;
                            }

                            if(isInArray(listVue.editForm.parentId,listVue.editForm.id)){
                                $this.$alert('父部门不能选择自己或自己的子菜单！', '提示', {
                                    confirmButtonText: '确定',
                                    callback : function callback() {

                                    }
                                });

                                return;
                            }

                            var parentId = listVue.editForm.parentId;
                            var fullUrlArr = parentId.toString();
                            listVue.editForm.fullUrl = parentId.toString();
                            listVue.editForm.parentId = listVue.editForm.parentId[parentId.length-1];


                            $.ajax({
                                cache: true,
                                url: '/dept/edit',
                                type: 'POST',
                                data: JSON.stringify(listVue.editForm),
                                dataType: 'json',
                                contentType: 'application/json',
                                async: false,
                                success: function (data) {
                                    if (data.status == 1) {
                                        $this.$message('更新成功');
                                        listVue.editDialogVisible = false;
                                        listVue.editForm = {id: '', role_name: ''};
                                        listVue.initMenu();
                                        search(listVue.pageNum);
                                        $this.$nextTick(function(){
                                            changeFooterHeight();
                                        })
                                    } else {
                                        $this.$message.error(data.msg);

                                    }
                                }
                            });
                        } else {
                            return false;
                        }
                    });

                }, handleEdit: function (id) {
                    var $this = this;
                    $.ajax({
                        cache: true,
                        url: '/dept/edit?newDate='+Math.random(),
                        type: 'GET',
                        data: {deptId: id},
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                listVue.editForm = data.value;
                                listVue.editForm.parentId = listVue.editForm.fullUrlArr;
                                listVue.selectedOptions = listVue.editForm.fullUrlArr;
                                listVue.selectedOptionsBf = listVue.editForm.fullUrlArr;
                                listVue.editDialogVisible = true;
                                $this.$nextTick(function(){
                                    changeFooterHeight();
                                })
                            }
                        }
                    });
                },
                addHeight: function () {
                    var $this = this;
                    $this.$nextTick(function () {
                        changeFooterHeight();
                    })
                }, handleDel: function (id) {
                    listVue.delDialogVisible = true;
                    listVue.delId = id;
                }, handleDelConfirm: function () {
                    listVue.delDialogVisible = false;
                    var $this = this;
                    $.ajax({
                        cache: true,
                        url: '/dept/delete',
                        type: 'GET',
                        data: {deptId: listVue.delId},
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                $this.$message({
                                    showClose: true,
                                    message: '删除成功',
                                    type: 'success'
                                });
                                listVue.initMenu();
                                search(1);
                                if ((listVue.total - 1) % 10 == 0) {
                                    listVue.pageNum = listVue.pageNum - 1;
                                }
                                $this.$nextTick(function(){
                                    changeFooterHeight();
                                })
                            }
                        }
                    });
                },
                initMenu: function () {
                    var $this = this;
                    var data = commonInitMenu($this);
                },
                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    window.localStorage.setItem('isCollapse',this.isCollapse);
                },
                changeSiderWidth:function(value){
                    changeSiderWidth(this,value);
                },
                openChangeSiderWidth:function(){
                    this.siderWidthDialog=true;
                }
            },
            created: function () {
                initCssProperty(this);
            }
        });

        function isInArray(arr,value){

            for(var i = 0; i < arr.length; i++){

                if(value === arr[i]){
                    return true;
                }
            }
            return false;
        }

        function search(pageNum, pageSize) {
            listVue.loading = true;
            var condition = {};
            condition['pageNum'] = listVue.pageNum;
            condition['pageSize'] = listVue.pageSize;

            $.ajax({
                cache: true,
                url: '/dept/list?newDate='+Math.random(),
                type: 'POST',
                data: JSON.stringify(condition),
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function (data) {
                    listVue.loading = false;
                    if (data.status == 1) {
                        var pageInfo = data.value;
                        listVue.tableData = pageInfo.list;
                        listVue.pageNum = pageInfo.pageNum;
                        listVue.total = pageInfo.total;
                        listVue.sizes = pageInfo.sizes;
                        listVue.addHeight();
                    }
                }
            });
        }

        $(function () {
            listVue.initMenu();
            var data = {};
            $.ajax({
                cache: true,
                url: '/dept/all?newDate=' + Math.random(),
                type: 'GET',
                data: data,
                dataType: 'json',
                contentType: 'application/json',
                async: true,
                success: function (data) {

                    if (data.status == 1) {
                        if (data.value.menus) {
                            listVue.deptmenus = data.value.menus;
                        }

                        var allMenu = [{
                            id: 0,
                            name: '部门列表',
                            label: '部门列表',
                            disabled: false,
                            children:  listVue.deptmenus,
                        }];
                        listVue.allMenus = allMenu;

                        if ($('.siderbar [tabindex="-1"].is-active').offset()) {
                            $('.siderbar').animate({
                                scrollTop: $('.siderbar [tabindex="-1"].is-active').offset().top
                            }, 1);

                        }
                    }
                    // return data;
                }
            });
            search(1, 10);
            // changeFooterHeight();
        })


    </script>
</th:block>
</body>
</html>